<template>
  <view class="health-update-page">
    <!-- 导航栏 -->
    <view class="navbar">
      <uni-icons 
        class="back-icon" 
        type="left" 
        size="36rpx" 
        color="#00CC71" 
        @click="navigateBack"
      />
      <text class="title">更新健康数据</text>
      <view class="divider"></view>
    </view>

    <!-- 表单区域 -->
    <view class="form-section">
      <!-- 身高 -->
      <view class="form-group">
        <text class="label">身高（cm）</text>
        <input 
          class="input-field" 
          type="number" 
          placeholder="输入身高信息" 
          v-model="height"
        />
      </view>

      <!-- 体重 -->
      <view class="form-group">
        <text class="label">体重（kg）</text>
        <input 
          class="input-field" 
          type="number" 
          placeholder="请输入体重信息" 
          v-model="weight"
        />
      </view>

      <!-- 血压 -->
      <view class="form-group">
        <text class="label">血压（mmHg）</text>
        <input 
          class="input-field" 
          type="text" 
          placeholder="如：120/80" 
          v-model="bloodPressure"
        />
      </view>

      <!-- 血糖 -->
      <view class="form-group">
        <text class="label">血糖（mmol/L）</text>
        <input 
          class="input-field" 
          type="text" 
          placeholder="请输入血糖值" 
          v-model="bloodSugar"
        />
      </view>

      <!-- 确认按钮 -->
      <button class="confirm-btn" @click="updateHealthData">确认更新</button>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import md5 from 'js-md5';

// 健康数据绑定
const height = ref('')
const weight = ref('')
const bloodPressure = ref('')
const bloodSugar = ref('')

// 返回逻辑
const navigateBack = () => {
  uni.navigateBack()
}

// 更新健康数据
const updateHealthData = () => {
  // 获取用户token
  const token = uni.getStorageSync('token')
  
  if (!token) {
    uni.showToast({
      title: '请先登录',
      icon: 'none'
    })
    return
  }
  
  // 表单验证
  if (!height.value || !weight.value || !bloodPressure.value || !bloodSugar.value) {
    uni.showToast({
      title: '请填写完整数据',
      icon: 'none'
    })
    return
  }
  
  // 准备请求数据
  const data = {
    height: height.value,
    weight: weight.value,
    blood_pressure: bloodPressure.value,
    blood_sugar: bloodSugar.value
  }
  
  // 显示加载中
  uni.showLoading({
    title: '更新中...',
    mask: true
  })
  
  // 发送请求
  uni.request({
    url: 'http://localhost:3010/user/update_health',
    method: 'POST',
    header: {
      'Content-Type': 'application/x-www-form-urlencoded',
      'Authorization': 'Bearer ' + token
    },
    data: Object.keys(data).map(key => 
      `${encodeURIComponent(key)}=${encodeURIComponent(data[key])}`
    ).join('&'),
    success: (res) => {
      uni.hideLoading()
      
      if (res.code === 200 && res.data.code === 200) {
        uni.showToast({
          title: '更新成功',
          icon: 'success',
          duration: 1500
        })
        
        // 更新成功后返回上一页
        setTimeout(() => {
          uni.navigateBack()
        }, 1500)
      } else {
        uni.showToast({
          title: res.data.msg || '更新失败',
          icon: 'none'
        })
      }
    },
    fail: (err) => {
      uni.hideLoading()
      uni.showToast({
        title: '网络请求失败',
        icon: 'none'
      })
      console.error('更新健康数据失败:', err)
    }
  })
}
</script>

<style scoped lang="scss">
.health-update-page {
  background-color: #FFFFFF;
  min-height: 100vh;

  // 导航栏样式
  .navbar {
    position: relative;
    height: 88rpx;
    display: flex;
    align-items: center;
    padding: 0 24rpx;
    margin-top: 90rpx;
    
    .back-icon {
      margin-right: 16rpx;
    }

    .title {
      font-size: 36rpx;
      color: #00d36d;
      font-weight: 700;
    }

    // 底部绿色分割线
    .divider {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 4rpx;
      background-color: #00d36d;
    }
  }

  // 表单区域
  .form-section {
    padding: 30rpx 24rpx;

    // 表单组通用样式
    .form-group {
      margin-bottom: 40rpx;

      .label {
        font-size: 32rpx;
        color: #333333;
        display: block;
        margin-bottom: 10rpx;
      }

      .input-field {
        width: 100%;
        font-size: 28rpx;
        color: #333333;
        padding-bottom: 10rpx;
        border-bottom: 1px solid #A6F2D4; // 浅绿色下划线
        placeholder {
          color: #999999;
        }
      }
    }

    // 确认按钮
    .confirm-btn {
      width: 100%;
      height: 88rpx;
      background-color: #00d36d;
      color: #FFFFFF;
      font-size: 32rpx;
      border-radius: 20rpx;
      box-shadow: 0 10rpx 30rpx rgba(0, 204, 113, 0.3); // 发光效果
      border: none;

      &::after {
        border: none; // 清除uni-app默认按钮边框
      }
    }
  }
}
</style>